<template>
<!-- 展示单独课程的详细信息 -->
    <div ref="main">
        <div class="id">
            <div class="head" style="margin-left:2px;margin-top:10px;font-size:14px;">
                <p style="float: left;color:#999999">首页\{{webcourse.titleOne}}\{{webcourse.titleTwo}}</p><p style="float: left;color:#333333">\{{webcourse.title}}</p>
            </div>
            <div style="clear: both;margin-top:20px">
                <div class="img"><img style="width: 100%;height: 100%;;" :src="webcourse.cover" alt=""></div>
                <div class="num">
                    <div class="numcss"><div style=" margin-left:12px;height: 122px;;width: 125px;border-bottom: solid #AD7376 1px;"><div>&nbsp;</div><div style="margin-top:10px;font-size:14px;color: #FFFFFF;">购买数</div><div style="margin-top:5px;font-size:22px;color: #FFFFFF;">{{webcourse.buyCount}}</div></div></div>
                    <div class="numcss"><div style=" margin-left:12px;height: 122px;;width: 125px;border-bottom: solid #AD7376 1px;"><div>&nbsp;</div><div></div><div style="margin-top:10px;font-size:14px;color: #FFFFFF;">课时数</div><div style="margin-top:5px;font-size:22px;color: #FFFFFF;">{{webcourse.lessNum}}</div></div></div>
                    <div class="numcss"><div>&nbsp;</div><div style="margin-top:10px;font-size:14px;color: #FFFFFF;">浏览数</div><div style="margin-top:5px;font-size:22px;color: #FFFFFF;overflow: hidden;"> {{webcourse.viewCount}}</div></div>
                </div>
                <div class="info">
                    <div class="box"><div style="width:100%;height:124px;border-bottom: solid #30536F 2px;"> <div style="margin-top:25px;color: #FFFFFF;font-size:24px;float: left;">30天搞定核心技术</div>
                    <div style="margin-top:20px;color: #FFFFFF;font-size:20px;float: left;clear: both;">价格:</div> <div style="color: #FFCC00;float: left;margin-top:12px;font-size:28px;margin-left:5px">￥ {{webcourse.price}}</div>
                    
                    </div>
                    <div style="margin-top:20px;color: #FFFFFF;font-size:15px;float: left;clear: both;">主讲: &nbsp;&nbsp;&nbsp;{{webcourse.teacherName}}</div>
                    <div style="margin-top:30px;color: #FFFFFF;font-size:15px;float: left;clear: both;">职位: &nbsp;&nbsp;&nbsp;{{webcourse.career}}</div>
                    <div style="margin-top:30px;margin-left:10px; color: #FFFFFF;font-size:18px;float: left;clear: both;"><i class="el-icon-star-on"></i><span style="font-size:18px">&nbsp;&nbsp;收藏</span></div>
                    <div v-if="show" style="margin-top:30px;color: #FFCC00;font-size:23px;float: left;clear: both;border-radius: 15px;border: 1px solid #FFCC00;"><a href="" style="color: #FFCC00;text-decoration: none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;立刻观看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
                    <div v-if="!show" style="margin-top:30px;color: #FFCC00;font-size:23px;float: left;clear: both;border-radius: 15px;border: 1px solid #FFCC00;"><router-link :to="'/order/'+webcourse.id" style="color: #FFCC00;text-decoration: none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;购买课程&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link></div>
                </div>
                </div>
            </div>
            <div class="courseinfo"><div style="float: left;width:75%;margin-top:20px;background-color:#FFFFFF;"><div class="top">
                <div class="title" style="margin-left:0px;"><a href="#">课程详情</a></div> <div class="title"><a href="#">课程大纲</a></div> <div class="title"><a href="#">课程评论</a></div>
                </div>
                <div style="width:96%;margin-left:20px;clear:both">
                    <div class="head">
                       <span style="background-color:black;height:100%;width:5px;float:left;margin-left:10px">&nbsp;</span> <span style="float: left;margin-top:-2px;margin-left:10px;color:#333333;font-size:16px">课程介绍</span>
                    </div>
                    <div class="cinfo"  style="margin-top:-8px" v-html="courseDescription">
                        
                    </div>
                    <div class="head" style="margin-top:0px">
                       <span style="background-color:black;height:100%;width:5px;float:left;margin-left:10px">&nbsp;</span> <span style="float: left;margin-top:-2px;margin-left:10px;color:#333333;font-size:16px">课程大纲</span>
                    </div>
                    <div class="video" style="margin-left:-20px">
                        
                        <ul >
                           <li v-for="chapter in chapterList" :key="chapter.id" style="clear: both;">
                            <div style="width:100%;background-color:#F4F4F4;height:30px;">
                            <div class="circle"></div>
                            <p style="float: left;margin-left:20px;margin-top:4px;">{{chapter.title}}</p>
                            </div>
                            <ul>
                                <router-link  to="#" v-for="video in chapter.children" :key="video.id" @click.native="playVedio(video.videoSourceId,video.title)" style="color:#555"><li style="clear: both;" ><div class="smallcircle"></div><p>{{video.title}}</p></li></router-link> 
                            </ul>
                           </li>
                        </ul>
                    </div>
                </div>
                </div>
                 <div style="float: left;"><div style="margin-left:44px;background-color:#FFFFFF;height:170px;width:280px;margin-top:-5px"><div class="righttop"><span style="float: left;margin-top:25px;font-size:18px;color: #666666;">课程讲师</span></div><div class="righttop2"><div class="tar" style="float: left;"><img  style="height: 60px;width: 60px;border-radius: 50%;margin-top:-10px;float: left;" :src="webcourse.avatar" alt=""><div style="float: left;height: 50px;width: 150px;margin-top:-5px;margin-left:15px"><p style="font-size:16px;float: left;margin-top:4px;color:#333333">{{webcourse.teacherName}}</p><p style="font-size:12px;margin-top:-8px;float: left;color:#999999">毕业于北京大学数学系</p></div></div></div></div></div>
                                  <div style="float: left;"><div style="margin-left:44px;background-color:#FFFFFF;height:170px;width:280px;margin-top:-5px"><div class="righttop"><span style="float: left;margin-top:25px;font-size:18px;color: #666666;">学过此课的人（top4）</span></div><div class="righttop2" >
                                    <div class="tar" style="float: left;"><div><img  style="height: 50px;width: 50px;border-radius: 50%;margin-top:-10px;float: left;" src="@/assets/2.jpg" alt=""><div>&nbsp;</div><div style="color:#999999;font-size:12px;margin-top:-10px">路飞</div></div></div>
                                    <div class="tar" style="float: left;margin-left:15px"><div><img  style="height: 50px;width: 50px;border-radius: 50%;margin-top:-10px;float: left;" src="@/assets/3.jpg" alt=""><div>&nbsp;</div><div style="color:#999999;font-size:12px;margin-top:-10px">乔治</div></div></div>
                                    <div class="tar" style="float: left;margin-left:15px"><div><img  style="height: 50px;width: 50px;border-radius: 50%;margin-top:-10px;float: left;" src="@/assets/4.jpg" alt=""><div>&nbsp;</div><div style="color:#999999;font-size:12px;margin-top:-10px">JACK</div></div></div>
                                    <div class="tar" style="float: left;margin-left:15px"><div><img  style="height: 50px;width: 50px;border-radius: 50%;margin-top:-10px;float: left;" src="@/assets/5.jpg" alt=""><div>&nbsp;</div><div style="color:#999999;font-size:12px;margin-top:-10px">TOM</div></div></div>
                                  </div></div>
                                  </div>
              
              </div>
        </div>
        <div>
            <el-dialog :destroy-on-close="true"  @opened="opena"  :visible="disable" :title="dialogTitle"  @close="closedialog">
                <div > 
                         <div id="J_prismPlayer" class="prism-player"/>
                </div>
            </el-dialog>
            
        </div>
        
    </div>
</template>
<style scoped>
.circle{
    height: 20px;
    width: 20px;
    background: #FFFFFF;
    float: left;
    margin-top: 4px;
    border: 1px solid #bbb;
    border-radius: 50%;
    
}
.cinfo p{
    margin-top: -4px;
}
.smallcircle{
    height: 14px;
    width: 14px;
    background: #FFFFFF;
    float: left;
    margin-top: 4px;
    border: 1px solid #bbb;
    border-radius: 50%;
}
.smallcircle+p{
   float: left;
   margin-top: 2px;
   margin-left: 14px;
   font-size: 14px;
}
li{
    list-style: none;
}
.courseinfo .head{
    height: 18px;
    width: 100%;
    margin-top:38px;
    clear: both;
}
.courseinfo{
    
}
.courseinfo .cinfo{
    width: 95%;
    margin-bottom: 10px;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 25px;
    text-align: justify;
    color: #888888;
    font-size: 14px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    clear: both;
}
.top{
    width: 97%;
    margin-left:15px;
    height: 35px;
    margin-top: 25px;
    border-bottom: 1px solid #e2e2e2;
}
.righttop{
    width: 90%;
    margin-left:12px;
    height: 60px;
    margin-top: 25px;
    border-bottom: 1px solid #e2e2e2;
}
.righttop2{
    width: 90%;
    margin-left:12px;
    height: 70px;
    margin-top: 25px;
    border-bottom: 1px solid #e2e2e2;
}
.top .title{
    color: #666666;
    float: left;
    margin-left: 20px;
    font-size: 18px;
}
.top .title a{
    color: #666666;
    text-decoration: none;
}
  .id {
  width: 1300px;
  margin-left: 100px;
}
.id .img{
    height: 369px;
    width: 700px;
    float: left;
    
}
.id .num{
    float: left;
    height: 369px;
    width: 150px;
}
.id .num .numcss{
    height: 123px;
    background-color: #985054;
}
.id .info{
    float: left;
    height: 369px;
    background-color: #264863;
    width:450px ;
    
}
.id .info .box{
    background-color: #264863;
    height: 369px;
    width: 410px;
    margin-left:20px;
}
</style>
<script>
import CourseApi from '@/api/course';
import OrderApi from '@/api/order';
import ChapterApi from '@/api/chapter';
import VideoApi from '@/api/video'
export default {
    
      // 页面渲染之后
  mounted() {
   
  },
    data(){
        return{
            webcourse:{},
            videoSourceId:"",//视频id
            playauth:"",//视频播放凭证
            disable:false,
            dialogTitle:'',//弹框标题
            courseId:"",
            show:false,
            chapterList:{},//章节信息大纲
            courseDescription:'',//课程信息
        }
    },
    methods:{
        getCourseDescription(){
            CourseApi.getCoursDescription(this.$route.params.id).then(res=>{
                this.courseDescription=res.data.item;
            })
        },
        getCoursePay(){
           CourseApi.getCourseInfoPay(this.$route.params.id).then((res)=>{
            if(res.code!==20000){
               this.$message.success(res.message)
            }
            else{
            this.webcourse=res.data.item;
            }
           })
        },
        fetchChapterList(){//请求章节信息
        ChapterApi.getNestList(this.$route.params.id).then((res) => {
        this.chapterList = res.data.items;
      });
        },
        //判断课程是否购买
        isBuy(){
          OrderApi.isBuyCourse(this.courseId).then(res=>{
            this.show=res.data.item
          })
        },
        opena(){
            //console.log("id："+this.videoSourceId)
            //console.log("auth："+this.playauth)
             new Aliplayer({
      id: 'J_prismPlayer',
      vid:this.videoSourceId,
      playauth:this.playauth,
      width: '100%', 
      height: '450px',
      // 以下可选设置  
      qualitySort: 'asc', // 清晰度排序
      mediaType: 'video', // 返回音频还是视频
      autoplay: false, // 自动播放
      isLive: false, // 直播
      rePlay: false, // 循环播放
      preload: true,
      controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
      useH5Prism: true, // 播放器类型：html5
    }, function (player) {
      console.log('播放器创建成功')
    });
    
        },
        playVedio(vid,title){
            //const height=this.$refs.main.clientHeight;
            this.dialogTitle=title;
            this.videoSourceId=vid;
            //请求视频凭证
            VideoApi.payDideo(this.videoSourceId).then(res=>{
              //console.log(res.data);
              this.playauth=res.data.item;//
              //console.log("payauth 执行完毕")
               this.disable=true;
             // console.log(this.playauth)
            })
        },
        closedialog(){
            this.disable=false;
            //数据清洗 重置数据
            this.videoSourceId="";
            this.playauth="";
            this.dialogTitle="";
        }
    },
    created(){
        //console.log("666666")
        this.courseId=this.$route.params.id;
        this.isBuy();
        this.getCoursePay();
        this.getCourseDescription();
        this.fetchChapterList();
    }
}
</script>